<template>
  <ToolbarButton
    icon="i-ri-subtract-line"
    title="水平线"
    :large-icon="props.largeIcon"
    :hide-text="props.hideText"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { inject, type Ref } from "vue";
import type { Editor } from "@tiptap/vue-3";
import ToolbarButton from "../../../button/index.vue";

defineOptions({
  name: "HorizontalRule",
});

const props = withDefaults(
  defineProps<{
    largeIcon?: boolean;
    hideText?: boolean;
  }>(),
  {
    largeIcon: false,
    hideText: true,
  }
);

// 注入编辑器实例
const editor = inject<Ref<Editor>>("editor");

const handleClick = () => {
  editor?.value?.chain().focus().setHorizontalRule().run();
};
</script>
